<!DOCTYPE html>
<html lang="zxx">

<head>
    <title>Gallery</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <script>
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }

    </script>
    <!-- //Meta tag Keywords -->

    <!-- Custom-Files -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- Bootstrap-Core-CSS -->
    <link rel="stylesheet" href="css/style2.css" type="text/css" media="all" />
    <!-- Style-CSS -->
    <!-- font-awesome-icons -->
    <link href="css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome-icons -->
    <!-- /Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900" rel="stylesheet">
    <!-- //Fonts -->

</head>

<body>
    <!-- mian-content -->
    <section class="main-content" id="home">

        <!-- header -->
        <header>
            <div class="container-fluid px-lg-5">
                <!-- nav -->
                <nav>
                    <div class="logo-w3ls" id="logo-w3ls">
                        <h1>
                            <a href="index.html"><span>T</span>oon</a>
                        </h1>

                    </div>

                    <label for="drop" class="toggle">Menu</label>
                    <input type="checkbox" id="drop" />
                    <ul class="menu">
                        <li class="mr-lg-4 mr-3"><a href="index.html">Home</a></li>
                        <li class="mr-lg-4 mr-3"><a href="about.html">About</a></li>
                        <li class="mr-lg-4 mr-3"><a href="blog.html">Blog</a>
                        </li>
                        <li class="mr-lg-4 mr-3 active">
                            <!-- First Tier Drop Down -->
                            <label for="drop-2" class="toggle">Dropdown <span class="fa fa-sort-desc" aria-hidden="true"></span> </label>
                            <a href="#">Gallery <span class="fa fa-sort-desc" aria-hidden="true"></span></a>
                            <input type="checkbox" id="drop-2" />
                            <ul>
                                <li><a href="gallery.html">Add link1</a></li>
                                <li><a href="gallery.html">Add link2</a></li>
                            </ul>
                        </li>
                        <li><a href="login.html">login</a></li>
                    </ul>
                </nav>
                <!-- //nav -->
                <!-- //nav -->
            </div>
        </header>
        <!-- banner-text-wthree -->
        <div class="page-inner">

        </div>
        <!---->
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="index.html">Home</a>
            </li>
            <li class="breadcrumb-item active">Gallery</li>
        </ol>
        <!---->
        <!--// banner-inner -->
    </section>

    <!-- portfolio -->
    <section class="py-lg-5 portfolio-flyer py-4">
        <div class="container py-lg-5 py-3">
            <h3 class="tittle text-center"><span class="sub-tittle">Recent works </span>Our Gallery</h3>

            <div class="row news-grids mt-lg-5 mt-4 text-center">
                <div class="col-md-4 gal-img">
                    <a href="#gal1"><img src="images/g1.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal2"><img src="images/g2.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal3"><img src="images/g3.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal4"><img src="images/g4.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal5"><img src="images/g5.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal6"><img src="images/g6.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal7"><img src="images/g7.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal8"><img src="images/g8.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal9"><img src="images/g9.jpg" alt="news image" class="img-fluid"></a>
                </div>
            </div>

        </div>
        <!-- popup-->
        <div id="gal1" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g1.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->

        <!-- popup-->
        <div id="gal2" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g2.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal3" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g3.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup3 -->
        <!-- popup-->
        <div id="gal4" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g4.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal5" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g5.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal6" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g6.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal7" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g7.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal8" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g8.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal9" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g9.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->

    </section>


    <!-- //portfolio -->

    <!--/ab -->
    <!--/footer-->
    <footer class="footer">
        <div class="container-fluid p-lg-5 p-md-3">

            <div class="row py-sm-4 py-3">
                <div class="col-lg-4 footer-end-grid">
                    <h2>
                        <a href="index.html"><span>T</span>oon</a>
                    </h2>
                    <p class="my-4 text-justify">Maecenas interdum, metus vitae tincidunt porttitor, magna quam egestas sem, ac scelerisque nisl nibh vel lacus. Proin eget gravida odio.</p>
                    <h3>Follow Us</h3>
                    <ul class="social-icons text-center d-flex">
                        <li>
                            <a href="#">
                               Facebook
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Twitter
                            </a>
                        </li>
                        <li>
                            <a href="#">
                              Google +
                            </a>
                        </li>
                        <li>
                            <a href="#">
                               Dribble
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="col-lg-2 col-md-4">
                    <h3>Useful Link</h3>
                    <ul class="list-footer-w3layouts">
                        <li>
                            <a href="index.html" class="nav-link">
                                Home
                            </a>
                        </li>
                        <li class="my-2">
                            <a href="about.html" class="nav-link">
                               About
                            </a>
                        </li>
                        <li class="my-2">
                            <a href="blog.html" class="nav-link">
                               Blog Posts
                            </a>
                        </li>
                        <li class="mb-2">
                            <a href="gallery.html" class="nav-link">
                              Gallery
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="col-lg-2  mt-sm-5">
                    <ul class="list-footer-w3layouts">
                        <li>
                            <a href="#login" class="nav-link">
                              Login
                            </a>
                        </li>
                        <li class="my-2">
                            <a href="#register" class="nav-link">
                               Register
                            </a>
                        </li>
                        <li class="my-2">
                            <a href="#" class="nav-link">
                                License
                            </a>
                        </li>
                        <li>
                            <a href="contact.html" class="nav-link">
                                Contact Us
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="subscribe col-lg-4">
                    <h3>Subscribe Now</h3>
                    <p class="my-4 text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit sedc dnmo eiusmod tempor incididunt ut labore.</p>
                    <form action="#" method="post" class="newsletter">
                        <input class="email" type="email" placeholder="Your email..." required="">
                        <input class="form-control" type="submit" value="Subscribe">
                    </form>
                </div>
            </div>
            <hr>
            <div class="d-flex justify-content-between pt-lg-3  footer-bottom-cpy">
                <div class="social-content pb-md-0 pb-4">
                    <ul class="social-icons text-center d-flex">
                        <li class="ml-lg-5">
                            <a href="#" class="reg-in">
                                Privacy and Policy
                            </a>
                        </li>
                        <li>
                            <a href="#register" class="nav-link reg-in two">
                               Register
                            </a>
                        </li>

                    </ul>


                </div>
            </div>
            <div class="text-right mt-3">
                <a href="#home" class="move-top scroll"><span class="fa fa-angle-up" aria-hidden="true"></span></a>
            </div>
        </div>
    </footer>
    <!-- popup-login-->
    <div id="login" class="pop-overlay animate">
        <div class="popup">
            <div class="login px-4 mx-auto mw-100">
                <h5 class="text-left mb-4">Login Now</h5>
                <form action="#" method="post">
                    <div class="form-group">
                        <label class="mb-2">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="" required="">
                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                    </div>
                    <div class="form-group">
                        <label class="mb-2">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="" required="">
                    </div>
                    <div class="form-check mb-2">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                        <label class="form-check-label" for="exampleCheck1">Check me out</label>
                    </div>
                    <button type="submit" class="btn btn-primary submit mb-4">Sign In</button>
                    <p class="text-left pb-4">
                        <a href="#" data-toggle="modal" data-target="#exampleModalCenter2"> Don't have an account?</a>
                    </p>
                </form>
            </div>


            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!--// popup-login-->
    <!-- popup-login-->
    <div id="register" class="pop-overlay animate">
        <div class="popup">
            <div class="login px-4 mx-auto mw-100">
                <h5 class="text-left mb-4">Register Now</h5>
                <form action="#" method="post">
                    <div class="form-group">
                        <label>First name</label>

                        <input type="text" class="form-control" id="validationDefault01" placeholder="" required="">
                    </div>
                    <div class="form-group">
                        <label>Last name</label>
                        <input type="text" class="form-control" id="validationDefault02" placeholder="" required="">
                    </div>

                    <div class="form-group">
                        <label class="mb-2">Password</label>
                        <input type="password" class="form-control" id="password1" placeholder="" required="">
                    </div>
                    <div class="form-group">
                        <label>Confirm Password</label>
                        <input type="password" class="form-control" id="password2" placeholder="" required="">
                    </div>

                    <button type="submit" class="btn btn-primary submit mb-4">Register</button>
                    <p class="text-left pb-4">
                        <a href="#">By clicking Register, I agree to your terms</a>
                    </p>
                </form>

            </div>

            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!--// popup-login-->
    <!--//footer-->

</body>

</html>
